<template>
	<view class="content">
		<view class="status_bar">
		 </view>
		<!-- <uni-nav-bar left-icon="location-filled" left-text="郑州市"  title="附近"></uni-nav-bar> -->
		<uni-nav-bar   title="附近"></uni-nav-bar>
		
		<view class="cont">
			<view class="cont_item" v-for="(item, index) in xinxi" :key="index">
				<view class="cont_l">
					<!-- <image src="../../static/yaoqing.png" mode=""></image> -->
					<image :src="ajax + item.avatar" mode=""></image>
					<view class="sex" v-if="item.gender == 0"><text class="sex1 iconfont icon-ziyuan2"></text></view>
					<view class="sex2" v-else><text class="sex1 iconfont icon-nan"></text></view>
				</view> 
				<view class="cont_c">{{item.nickname}}</view>
				<view class="cont_r" @click="add(item.id)">
					添加好友
				</view>
			</view>
		</view>
		
		<view class="mask_bg" v-if="active" @touchmove.stop.prevent>
			<view class="mask">
				<view class="brief">
					个人简介
				</view>
				<text class="close iconfont icon-guanbi1" @click="guanbi()"></text>
				<!-- <image src="../../static/yaoqing.png" mode=""></image> -->
				<image :src="ajax + xinxidetail.image" mode=""></image>
				<view class="title">
					<view class="title1">姓名：{{xinxidetail.name}}</view>
					<view class="title1" v-if="xinxidetail.gender == 0">性别：女</view>
					<view class="title1" v-else>性别：男</view>
					<!-- <view class="title1">位置：郑州</view> -->
					<view class="title1">个人描述：{{xinxidetail.desc}}</view>
				</view>
				<view class="btm">
					<view class="title1">微信：{{xinxidetail.wx}}</view> 
					<view class="copy" @click="paste(xinxidetail.wx)">
						复制
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {	
		components: {uniNavBar},
		data() {
			return {
				list:[{sex:1,id:1,name:'隔壁山头女大王1',nickName:'张德涵1',location:'郑州',title:'热情活泼开朗大男孩一个',wx:'VX2354831'},
				{sex:2,id:2,name:'隔壁山头女大王2',nickName:'张德涵2',location:'郑州',title:'热情活泼开朗大男孩一个',wx:'VX2354832'},
				{sex:1,id:3,name:'隔壁山头女大王3',nickName:'张德涵3',location:'郑州',title:'热情活泼开朗大男孩一个',wx:'VX2354833'}],
				active:false,
				xinxi:[],
				xinxidetail:'',
				info:'',
				ajax:''
			}
		},
		onLoad() {
			uni.showLoading({
			    title: '加载中'
			});
			this.yonghu()
			this.ajax = getdata.imgUrl
		},
		onShow(){
			this.userinfo()
		},
		methods: {
			userinfo(){
				//获取用户信息
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_this.info = res.data.data
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			yonghu(){
				//获取附近用户信息
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/user_near',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						console.log(res)
						uni.hideLoading();
						if(res.data.code == 1){
							_this.xinxi = res.data.data
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			add(id){
				var _this = this
				if(_this.info.user_level != 4){
					getdata.shou('请升级终身会员后方可查看')
				}else{
					uni.showLoading({
					    title: '加载中'
					});
					
					//获取附近用户详情
					var token = uni.getStorageSync('token')
					var data = {
						id:id
					}
					uni.request({
						url: getdata.websiteUrl + '/user/user_near_info',
						header:{'content-type': "application/x-www-form-urlencoded",token:token},
						dataType: 'json',
						method: 'POST',
						data:data,
						success: res => {
							_this.active = !_this.active
							uni.hideLoading();
							console.log(res)
							if(res.data.code == 1){
								_this.xinxidetail = res.data.data
							}else if(res.data.code == 401){
								getdata.shou('请登录')
								uni.reLaunch({
								    url: '../login/login'
								});
							}else{
								getdata.shou(res.data.msg)
							}
						},
						fail: res => {
							uni.hideLoading();
							getdata.shou('服务器断开链接')
						}
					});
				}
			},
			guanbi(){
				this.active = false
			},
			paste(item) {
				//复制微信
			  uni.setClipboardData({
			   data: item,
			   success: function () {
				   console.log('success');
			   }
			  });
			 },
		}
	}
</script>

<style lang="scss">
@import '../../static/iconfont/iconfont.css';	
.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }	
.uni-navbar--border{
	border: none !important;
}	
.uni-nav-bar-text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.cont{
	width: 100%;
	box-sizing: border-box;
	padding: 0 50rpx;
	.cont_item{
		display: flex;
		margin-top: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		.cont_l{
		width: 80rpx;
		height: 80rpx;
		position: relative;
			image{
			width: 80rpx;	
			height: 80rpx;
			border-radius: 50%;
			}
			.sex{
				position: absolute;
				bottom:0;
				right:0;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background-color: #F2154E;
				.sex1{
					font-size: 22rpx;
					color: #fff;
					position: absolute;
					bottom:-28rpx;
					right:3rpx;
				}
			}
			.sex2{
				position: absolute;
				bottom:0;
				right:0;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background-color: #156DF2;
				.sex1{
					font-size: 22rpx;
					color: #fff;
					position: absolute;
					bottom:-28rpx;
					right:3rpx;
				}
			}
		}
		.cont_c{
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
		.cont_r{
			margin-left: auto;
			width: 130rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #1578F2;
			border-radius: 30rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			text-align: center;
			margin-top: 10rpx;
		}
	}
	
}	
.mask_bg{
	z-index: 999;
	width: 100vw;
	height: 100vh;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
    background: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	.mask{
		width: 600rpx;
		// height: 800rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 45rpx;
		position: relative;
		.brief{
			font-size: 24rpx;
			line-height: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #24222D;
			text-align: center;
			margin: 50rpx;
		}
		.close{
			position: absolute;
			top:40rpx;
			right:57rpx;
			font-size: 50rpx;
			color: #999999;
		}
		image{
			width: 380rpx;
			height: 300rpx;
			border-radius: 20rpx;
			margin: 0 auto 47rpx;
			display: block;
		}
		.title{
			.title1{
				font-size: 24rpx;
				line-height: 1.5;
				font-family: PingFang SC;
				// font-weight: bold;
				color: #24222D;
				margin-bottom: 15rpx;
			}
		}
		.btm{
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-top: 33rpx;
			padding: 35rpx 0;
			.title1{
				font-size: 24rpx;
				line-height: 1.5;
				font-family: PingFang SC;
				// font-weight: bold;
				color: #24222D;
				// margin-bottom: 15rpx;
			}
			.copy{
				width: 124rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #1578F2;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
		}
			
		
	}
}
</style>
